#OrderForm label,
.progress-checker-form label,
.gfield_label {
  font-size: 16px !important;
  color: var(--cel-corporate-navy) !important;
  font-weight: 500 !important;
}

.progress-checker-form label,
#OrderForm label {
  display: block;
  width: 100%;
}

#OrderForm label,
.progress-checker-form input {
  margin-bottom: 1.5rem;
}
.progress-checker-form input {
  font-size: 14px;
}
#OrderForm input[type="text"],
#OrderForm input[type="number"],
.progress-checker-form input {
  display: block;
  width: 100%;
  padding: 0 12px;
  line-height: 38px;
  margin-top: 8px;
}

#OrderForm input[type="text"],
#OrderForm input[type="number"],
.ginput_container input,
.ginput_container select,
.ginput_container textarea,
.progress-checker-form input,
.ginput_container_select .chosen-single {
  border: 1px solid var(--transparent-corporate-navy) !important;
  border-radius: 4px !important ;
  box-shadow: none !important;
  transition: all 0.4s ease !important;
}

#OrderForm input[type="text"]:focus,
#OrderForm input[type="number"]:focus,
.ginput_container input:focus,
.ginput_container select:focus,
.ginput_container textarea:focus,
.progress-checker-form input:focus {
  outline: none !important;
  border-color: var(--cel-cobalt-blue) !important;
  background-color: var(--transparent-cobalt-blue) !important;
}

.gform_button,
.gform-theme-button,
#OrderForm input[type="button"] {
  font-weight: bold !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  background-color: var(--cel-citron) !important;
  color: var(--cel-corporate-navy) !important;
  padding: 14px 24px !important;
  border-radius: 30px !important;
  border: 3px solid var(--cel-citron) !important;
  min-width: 125px !important;
  transition: all 0.4s ease !important;
  box-shadow: none !important;
  opacity: 1;
}

.gform_button:hover,
.gform-theme-button:hover,
#OrderForm input[type="button"]:hover {
  opacity: 0.64 !important;
}

.newsletter-form-wrapper .gform_fields {
  row-gap: 0.75rem !important;
}

.newsletter-form-wrapper .gfield_label {
  display: none !important;
}

.newsletter-form-wrapper .gform-footer {
  margin-top: 0.75rem !important;
}
.newsletter-form-wrapper .gform_body input {
  display: block !important;
  width: 100%;
  border: none !important;
  padding: 15px 20px !important;
  line-height: 1 !important;
  border-radius: 30px !important;
  position: relative;
  height: 50px !important;
}
.newsletter-form-wrapper .gform_button {
  background-color: var(--cel-violet) !important;
  border-color: var(--cel-violet) !important;
  color: #fff !important;
}

footer .newsletter-form-wrapper .gform_body input {
  text-align: left !important;
}

footer .newsletter-form-wrapper .gform_body input::placeholder,
body .gform_body input::placeholder,
body .gform_body textarea::placeholder,
body .gform_body select::placeholder {
  color: #707070 !important;
}

footer .newsletter-form-wrapper .gform_button {
  width: 100% !important;
}
.newsletter-form-wrapper .gform_validation_errors {
  display: none !important;
}

.newsletter-form-wrapper .gform_confirmation_message * {
  font-weight: bold !important;
  color: var(--cel-personality-pink) !important;
}
footer .newsletter-form-wrapper .gform_body input {
  border: 1px solid #e3e3e3 !important;
}

/* Hide default radio inputs */
.page-template-template-form .gravity-form-shortcode-wrapper .gfield_radio .gchoice input.gfield-choice-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Force flex on the radio container */
.page-template-template-form .gravity-form-shortcode-wrapper div.ginput_container.ginput_container_radio div.gfield_radio {
  display: flex !important;
  flex-wrap: wrap !important;
  flex-direction: row !important;
  gap: 0.75rem !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Each choice div */
.page-template-template-form .gravity-form-shortcode-wrapper div.ginput_container.ginput_container_radio div.gfield_radio div.gchoice {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Style labels as pills */
.page-template-template-form .gravity-form-shortcode-wrapper div.ginput_container.ginput_container_radio div.gfield_radio div.gchoice label {
  display: inline-block !important;
  padding: 10px 20px !important;
  border-radius: 50px !important;
  background-color: #f2f2f5 !important;
  color: var(--cel-corporate-navy) !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
  white-space: nowrap !important;
  margin: 0 !important;
  width: auto !important;
}

/* Hover state */
.page-template-template-form .gravity-form-shortcode-wrapper div.ginput_container.ginput_container_radio div.gfield_radio div.gchoice label:hover {
  background-color: var(--transparent-personality-pink) !important;
}

/* Selected state - CSS native */
.page-template-template-form .gravity-form-shortcode-wrapper div.ginput_container.ginput_container_radio div.gfield_radio div.gchoice input.gfield-choice-input:checked + label {
  background-color: var(--cel-personality-pink) !important;
  color: #fff !important;
}

/* Selected state - JS fallback class */
.page-template-template-form .gravity-form-shortcode-wrapper div.ginput_container.ginput_container_radio div.gfield_radio div.gchoice label.gf-pill-active {
  background-color: var(--cel-personality-pink) !important;
  color: #fff !important;
}

/* White pill background when inside .bg-transparent-cobalt-blue */
.page-template-template-form .gravity-form-shortcode-wrapper .bg-transparent-cobalt-blue div.ginput_container.ginput_container_radio div.gfield_radio div.gchoice label {
  background-color: #fff !important;
}

.gravity-form-shortcode-wrapper input,
.page-template-template-pay-form input,
.gravity-form-shortcode-wrapper select,
.page-template-template-pay-form select,
.gravity-form-shortcode-wrapper textarea,
.page-template-template-pay-form textarea {
  font-size: 16px !important;
}

.page-hero-form-container .gform-theme--framework .gform_validation_errors .gform_submission_error {
  color: var(--gf-form-validation-heading-color) !important;
  display: flex;
  flex-direction: column;
  font-family: var(--gf-form-validation-heading-font-family);
  font-size: var(--gf-form-validation-heading-font-size);
  font-weight: var(--gf-form-validation-heading-font-weight);
  gap: var(--gf-form-validation-heading-gap);
  line-height: var(--gf-form-validation-heading-line-height);
}

.gform-theme-button#gform_previous_button_80 {
  background-color: transparent !important;
  border: none !important;
  font-weight: normal !important;
  padding: 0 !important;
  min-width: 0 !important;
  margin-right: 1rem;
  font-size: 15px !important;
  text-decoration: underline;
  color: var(--cel-personality-pink) !important;
}

#gf_progressbar_wrapper_80 .gf_progressbar_title {
  text-align: center !important;
  color: var(--cel-corporate-navy) !important;
}

.page-hero-form-container h2.gform_submission_error {
  text-align: center !important;
}

@media (min-width: 991.98px) {
  footer .gform_fields,
  footer .gform_wrapper form {
    display: flex !important;
    column-gap: 0.64rem !important;
  }

  footer .gform_wrapper .gform-footer {
    margin-top: 0 !important;
  }

  footer .newsletter-form-wrapper .gform_body input {
    min-width: 100px !important;
    padding: 8px 20px !important;
    width: auto !important;
    line-height: 1 !important;
  }
  footer .newsletter-form-wrapper input[type="submit"] {
    max-height: 50px !important;
  }
}
